<template>
  <div class="change-user column">
    <div class="title row">
      <h3>编辑资料</h3>
    </div>
    <el-divider></el-divider>
    <el-form
      :model="formData"
      status-icon
      ref="formData"
      label-width="100px"
      label-position="left"
      class="formData"
    >
      <el-form-item label="头像：">
        <div class="row center">
          <el-upload
            class="upload-img"
            action="https://jsonplaceholder.typicode.com/posts/"
            :limit="1"
            list-type="picture"
            :on-success="onSuccess"
            :on-exceed="handleExceed"
            :file-list="fileList"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </div>
      </el-form-item>
      <el-form-item label="姓名：">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="账号：">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="学号：">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="性别：">
        <el-radio-group v-model="formData.sex">
          <el-radio label="1">男</el-radio>
          <el-radio label="0">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('formData')"
          >提交修改</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import userApi from "@/api/user";
export default {
  name: "editUser",
  data() {
    return {
      formData: {
        imageUrl: "",
        name: "",
        sex: "",
      },
      fileList: [
        {
          name: "food.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
      ],
    };
  },
  computed: {
    userInfo() {
      return JSON.parse(localStorage.getItem("userInfo"));
    },
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var formData = new FormData();
          formData.append("password", this.formData.pass);
          formData.append("userId", this.userInfo.userId);
          userApi.updatePass(formData).then((res) => {
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.resetForm(formName);
          });
        } else {
          return false;
        }
      });
    },
    // 头像上传
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    onSuccess(res, files, fileList) {
      console.log("file upload success!", fileList);
    },
  },
};
</script>

<style scoped>
.change-user {
  width: 1000px;
  box-sizing: border-box;
  padding: 35px 0;
}
.change-user .title {
  align-items: center;
}
.change-user .title h3 {
  color: #343739;
  font-size: 24px;
  display: inline-block;
  margin: 0 15px 0 0;
  font-weight: normal;
  vertical-align: middle;
}
.formData {
  width: 40%;
  margin-left: 20px;
}
/* 头像上传 */
</style>